<template>
  <div class="login-container">
    <div class="login-box">
      <div style="height: 40%;width: 100%;margin: auto;display: flex;flex-direction: column;justify-content: center;align-items: center">
        <img alt="Vue logo" src="../assets/logo.png">
        <div style="width: 100%;text-align: center">
          <h2>登录</h2>
          <h3>使用您的饿死了么账号</h3>
        </div>
      </div>


      <div style="height: 40% ;width: 35%; margin: auto;text-align: center">
        <div style="width: 100%;height: 30%;display: flex;justify-content: center;align-items: center">
          <a-input v-model="userName" placeholder="账号">
            <a-icon slot="prefix" type="user"></a-icon>
          </a-input>
        </div>
        <div style="width: 100%;height: 30%;display: flex;justify-content: center;align-items: center">
          <a-input-password v-model="userPasswd" placeholder="密码" @keyup.enter="submitLoginEvent">
            <a-icon slot="prefix" type="lock"></a-icon>
          </a-input-password>
        </div>
        <div style="height: 20%"/>
        <div style="width: 100%;height: 20%;display: flex;justify-content: center;align-items: center">
          <a-row style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center">
            <a-col :span="12">
              <router-link to="/register">
                <a-button>
                  注册
                </a-button>
              </router-link>
            </a-col>
            <a-col :span="12">
              <a-button :loading="loading" type="primary"
                        v-bind:disabled="disableSubmit" v-on:click="submitLoginEvent">登录</a-button>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import {sha256_digest} from '@/ref/sha256'
import {notification} from 'ant-design-vue'
export default {
  data() {
    return {
      userName: '',
      userPasswd:'',
      loading:false
    };
  },
  methods:{
    submitLoginEvent:function() {
      if(this.disableSubmit) return
      let name=this.userName
      let passwd=this.userPasswd
      this.loading=true

      let rearUrl=this.$store.state.rear_url
      passwd=sha256_digest(passwd)
      this.$axios.post('http://'+rearUrl+'/login',{
        username:name,
        password:passwd
      })
      .then((res)=>{
        this.loading=false
        console.log(res.data)
            if (res.data.loginStatus!==0){
              notification.open({
                message:'登陆失败',
                description:'用户名或密码错误'
              })
            }else{
              this.$store.commit('setTokenValue',res.data.token)
              this.$store.commit('setUserName',name)
              this.$store.commit('setUserID',res.data.userID)
              console.log(this.$store.state.userID)
              notification.open({
                message:'登陆成功',
                description:'欢迎回来，'+name
              })
              if(this.$route.query.user==undefined) this.$router.go(-1)
              else window.location='/#/'
            }
      }).catch((err)=>{
        this.loading=false
        notification.open({
          message:'登陆失败',
          description:"服务器错误："+err.message
        })
      })
    }
  },
  created:function () {
    this.userName=this.$route.query.user
  },
  computed:{
    disableSubmit:function (){
      return this.userName == '' || this.userPasswd == '';
    }
  }
};
</script>


<style>
.login-container{
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.login-box{
  height: 80%;
  width: 50%;
  border: 1px outset #dddddd;
  border-radius: 8px;
  font-family: "Segoe UI",sans-serif;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>